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Unit One - Web sites 


HTML Language 


In order to design the form (as described previously) and enter 
your data through interactive web by using the HTML language 

Form 
throughthe form you can Add collection of elementsto web 
page such as buttons or fields 

Text box 
Allowsthe page visitorto entertext dataBy typing inside the box 
throughthe keyboard 

<Inputtype = Text zs 

Password field 
Thesymbol* appears when youtype in itto hide the 
components of the real password 

<Inputtype = "password'> 

Radio Button 

You are allowed to choose only one alternative out of several 
Male <Inputtype = radio name = "a"> 
Female <Input type = radio name = "a"> 

checkbox 
Possibility to choose moreFrom aselection box atthe same time 
(several alternatives). 

Arabic <Input type = ‘Checkbox’ > 


(Button) 
When you press this button, it can perform many functions such 
as recording your data - clearing your datafrom form elements - 
calling a function. 
«inputtype- button’ value- "ok" 
Submitbutton 
By clicking onit, your datathat you enteredthroughthe form 
elements will be senttothe pageother. 
«form action=" process. php "> 
<Inputtype = "submit" 
Reset button 
To delete the previously entered values and return to the default 
values forthe tools. 
<Inputtype = "reset"> 


Name: To prevent the user from choosing or selecting more than one 
option or choice 

Value:To specify the text that appears on the command button 
Action: To specify the process to be performed by pressing the submit 
button 

Onclick: To callthe function 


Unit Two - JAVA Script Language 


JavaScript fundamentals: 
- JavaScript commands and instructions are called Statements. 
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- JavaScript commands and instructions (Statements) are 
written within HTML tags. 
- JavaScript statements are written inside <Script></Script> 
-Each statement must end with a semi- colon (;) character. 
- The letter case must be considered while writing JavaScript 
statements. 
Alert clause 
To display a message inside a box, which attracts attention to 
read it 
Sentence document. write 
Shows a written message on the web page itself 
Function: 
Function is JavaScript statements grouped together in named 
block and performed according to call it We will learn to: 
- Create aJavaScript function contains a group of 
statements 


- Callthe function according to occurrence of a button click 


Tocreate aFunction:followthese steps. 
- Write word function and followed with its suitable name 


- Write a group of JavaScript statements between). } curly 


brackets as shown inthe following rectangle. 
function function_name() { 
code to be executed 


} 


Function call 


Tocall any function, followthese steps: 

-Write an HTML tag for displaying a button within webpage. 
-Write an onclick’ attribute to this button 

-Write a function name asthe value of that attribute (onclick). 


As the following: 
<input type=' button" onclick- function name you need to 
Call - 


Activity 

Change the previous activity so that the country( ) function 
can be executed when a button clicked. 

<input type=" button" onclick="country()" value="click me" 


Branching: 
Depending onthetest result of a particular conditional! 
expression ,sometimes we may needto execute or not 
.execute commands or statements 

Branching IF statementis written as the following: 

e If(conditional expression) 


(statementto be executed ifthe condition result lead totrue ) 


Data validation 
After you ve finished learning basics of JavaScript language, 
you will use this language to set a webpageto be an interactive 
webpage that validates your entered data. 
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Examples of Data validation: be determinedThe type of browser required to perform each 
(Required Field) .commandto be addressed 


Y Amongthe newcommandsthathelp control the verification 
:of the validity of the entered data, including 

= color box 

= date box 

= number box 

" required property of thetext boxwidget 


Define the minimum allowed length forthe input. 
Matching the data entered inthe two fields 
Prevent the user from entering type 
Firstly: (Required Field) 
if (form1.text1.value=="") { 
alert ("required field’ ); 
Secondly: define the minimum allowed length forthe > ColorInput Field 
input. <input type="color"> 
if (form1.text1.value. length<8) { (this input type is supported in Google Chrome) 
alert (“minimum allowed length 8 characters"); > Dateinputfield 
Third: Matching the data entered in the two fields <input type='date'> 
if (form1.text1.value! ==form1.text2.value) { 
alert (“the two values do not match"); 
Fourth: Preventthe user from entering type 
if (isNan(form1.text1.value)) { 
alert ("enter anumeric value"); 


(this inputtype is supported in Google Chrome) 


> NumberlnputField 
«inputtype-" number" min="1" max="20"> 
HTML 5 - (More Informative) Med el Ee in Google Chrome or Firefox) 
Y Itisanewerversion ofHTMLIt appearedinJS-1é and has many <inputtype="text" Required> 
improvements that we see fromThrough the use of a set of o. . . 
.newtools that facilitate the idea of designing a web page (This inputtype is supportedin Internet Explorer) 
Y Itmustbetakeninto accountthatthe available Internet Unit Three - Internet Safety 
browser programs such as Google Chrome, Internet » Identity theft 


Explorer; EFT OX. andothers (do notfully supportthe -— Itis the impersonation of someone or using his name to use 
implementation of new commands forthe version ), soit will Nee : 
any concerning information. 
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Parasite programs are programs that backdoor computer 
systems. The nameis derived from Malicious Software. 
Toprotect your system against them, use antivirus programs 
and update them continually. 


It is computer programs that collect personal information of 
the users without their consent. To protect your computer, 
you must use anti-spyware programs that detect programs 
like spyware, adware and files that control your internet 
browser. 


It is asmall program that can spread itself to infectthe 
computer and programs. 


They are all the personal data that must not be shownto 
everyone onthe internet like: username, password or mobile 
phone number. 

Important direction for internet safety 
The following are some of the important guideline to better 
internet Safety: 
Keep your username and password secret. 
Think well before publishing your personal photo or sending 
text or sound files or videos onthe internet. 


Before publishing anything ask the person before publishing 
his photo or sending their phone number or email addressto 
other people online. 

DO NOT reply to unknown messages or from unknown 
people. 

DO NOT add people you do not know to your friend list. 

Do notsend messages when angry. 

Nottaking any steptowards illegal operation is kind of hiding 
the wrong doer. Sotell an adultdirectly of anything you 
doubt. 

Learn howto ban people from reaching chat boxand print or 
screenshotthemto be easy for parentstotaekthe right step 
againstthem. 

Learn howto bandisturbing messages. 

Know wellthat online chatis not personal , some others may 
berecording or printing these chats and ( publish them later 
on. 

Thefollowing idioms are key words forinternet search for 
more information aboutthis lesson. 
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